import React, { Component } from 'react'

export default class App extends Component {
  state = {
    textValue: '',
    textareaValue: '',
    // selectValue: '1'
    selectValue: ['1']
  }

  handleChange = () => {
    return (e) => {
      console.log(e.target.value)

      this.setState({
        textValue: e.target.value
      })
    }
  }

  handleAreaChange = () => {
    return (e) => {
      console.log(e.target.value)

      this.setState({
        textareaValue: e.target.value
      })
    }
  }

  handleSelectChange = () => {
    return (e) => {
      console.log(e.target.value)

      this.setState({
        selectValue: e.target.value
      })
    }
  }

  handleSubmit = () => {
    return (e) => {
      e.preventDefault()
      console.log(this.state.textValue)
      console.log(this.state.textareaValue)
      console.log(this.state.select)
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit()}>
          <input type="text" 
            value={this.state.textValue} 
            onChange={this.handleChange()} 
          />
          <br/>
          <textarea name="" id="" cols="30" rows="10"
            value={this.state.textareaValue}
            onChange={this.handleAreaChange()} 
          ></textarea>  
          <br/>
          <select name="" id="" value={this.state.selectValue} onChange={this.handleSelectChange()} multiple="multiple">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">深圳</option>
          </select>
          <br/>
          <input type="submit" value="提交" />
        </form>
      </div>
    )
  }
}
